<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" width="300">
            </el-table-column>
            <el-table-column prop="name" label="个人事迹" width="300">
            </el-table-column>
            <el-table-column prop="role" label="参与角色" width="300">
            </el-table-column>
            <el-table-column prop="start" label="开始时间" width="300">
            </el-table-column>
            <el-table-column prop="end" label="结束时间" width="300">
            </el-table-column>
            <el-table-column prop="detail" label="具体细节" width="250">
            </el-table-column>
            <!-- <el-table-column prop="position.company.name" label="公司名称" width="250">
            </el-table-column>
            <el-table-column prop="position.department.name" label="部门名称" width="250">
            </el-table-column> -->

            <el-table-column label="修改" width="250">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="b(scope.$index)">修改</el-button>
                    <el-dialog
                            title="提示"
                            :visible.sync="dialogVisible1"
                            width="30%"


                    >
            <span>

                <div style="display:inline">
                <label>项目名称</label>
                <el-input
                        v-model="deed_amend.name"
                        style="margin-right: 40%,padding-bottom: 10px"
                ></el-input>
                
             
                <label>项目角色</label>
                <el-input
                        v-model="deed_amend.role"
                        style="margin-right: 40% margin-top: 10px"
                ></el-input>
               
               <label>开始时间</label>
                <el-input
                        v-model="deed_amend.start"
                        style="margin-right: 40% margin-top: 10px"
                ></el-input>
                <label>结束时间</label>
                <el-input
                        v-model="deed_amend.end"
                        style="margin-right: 40% margin-top: 10px"
                ></el-input>
               
               
               <label>项目细节</label>
                <el-input
                        v-model="deed_amend.detail"
                        style="margin-right: 40% margin-top: 10px"
                ></el-input>

               
               
                              
                </div>
             
            </span>
                        <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="amend1()"
              >确 定</el-button
              >
            </span>
                    </el-dialog>


                </template>
            </el-table-column>
            <el-table-column label="删除" width="250">

                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="del1(scope.$index)">删除</el-button>

                </template>

            </el-table-column>

        </el-table>
        <el-button type="primary" size="mini" @click="dialogVisible2 = true" style="margin-left: 35%;margin-top: 20px">
            添加
        </el-button>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible2"
                width="30%"


        >
            <span>

                <div style="display:inline">
                <label>项目名称</label>
                <el-input
                        v-model="add.name"
                        style="margin-right: 40%,padding-bottom: 10px"
                ></el-input>
                
             
                <label>项目角色</label>
                <el-input
                        v-model="add.role"
                        style="margin-right: 40% margin-top: 10px"
                ></el-input>
               
               <label>开始时间</label>
                <el-input
                        v-model="add.start"
                        style="margin-right: 40% margin-top: 10px"
                ></el-input>
                <label>结束时间</label>
                <el-input
                        v-model="add.end"
                        style="margin-right: 40% margin-top: 10px"
                ></el-input>
               
               
               <label>项目细节</label>
                <el-input
                        v-model="add.detail"
                        style="margin-right: 40% margin-top: 10px"
                ></el-input>

                </div>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible2 = false">取 消</el-button>
              <el-button type="primary" @click="add1()"
              >确 定</el-button
              >
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "EmpDeed",
        created() {
            this.getRequest('/emp/deed/get').then((res) => {
                let hr = res.data;


                hr.deeds.forEach((item) => {
                    this.tableData.push({
                        id: item.id,
                        name: item.name,
                        role: item.role,
                        start: item.start,
                        end: item.end,
                        detail: item.detail,
                        position: item.position,

                    });
                });
            })
        },
        data() {
            return {

                index: "",
                tableData: [],
                deed_amend: {
                    id: "",
                    role: "",
                    name: "",
                    detail: "",
                    end: "",
                    start: "",
                    position: "",
                },
                a: {
                    id: "",
                    role: "",
                    name: "",
                    detail: "",
                    end: "",
                    start: "",
                    position: "",
                },
                add: {
                    id: "",
                    role: "",
                    name: "",
                    detail: "",
                    end: "",
                    start: "",
                    position: "",
                },
                amend: {
                    id: "",
                    role: "",
                    name: "",
                    detail: "",
                    end: "",
                    start: "",
                    position: "",
                },
                dialogVisible1: false,
                dialogVisible2: false,
            };
        },
        methods: {

            b(index) {


                this.index = index;
                this.dialogVisible1 = true;
            },
            add1() {


                this.a.name = this.add.name,
                    this.a.role = this.add.role,
                    this.a.start = new Date(parseInt(this.add.start)),
                    this.a.end = new Date(parseInt(this.add.end)),
                    this.a.detail = this.add.detail,
                    this.a.position = null,

                    this.postRequest('/emp/deed/post', this.a).then((res) => {
                        console.log(res.data.deeid);
                        this.a.id = res.data.deeid;

                        this.tableData.push({
                            id: this.a.id,
                            name: this.a.name,
                            role: this.a.role,
                            start: this.a.start,
                            end: this.a.end,
                            detail: this.a.detail,
                            position: this.a.position,

                        });


                    }).catch((error) => {
                        this.$message.error("上传失败");
                        //alert("无法展示");

                    });


                this.add.name = "";
                this.add.role = "";
                this.add.start = "";
                this.add.end = "";
                this.add.detail = "";

                this.dialogVisible2 = false;
            },
            amend1() {


                this.tableData[this.index].name = this.deed_amend.name;
                this.tableData[this.index].role = this.deed_amend.role;
                this.tableData[this.index].start = this.deed_amend.start;
                this.tableData[this.index].end = this.deed_amend.end;
                this.tableData[this.index].detail = this.deed_amend.detail;
                this.amend.id = this.tableData[this.index].id;
                this.amend.name = this.deed_amend.name;
                this.amend.role = this.deed_amend.role;
                this.amend.detail = this.deed_amend.detail;
                this.amend.start = new Date(parseInt(this.deed_amend.start));
                this.amend.end = new Date(parseInt(this.deed_amend.end));


                this.amend.position = this.tableData[this.index].position;

                this.putRequest('/emp/deed/put', this.amend).then((response) => {


                }).catch((error) => {
                    this.$message.error("上传失败");

                });
                this.deed_amend.name = "";
                this.deed_amend.end = "";
                this.deed_amend.start = "";
                this.deed_amend.role = "";
                this.deed_amend.detail = "";
                this.deed_amend.position = "";
                this.dialogVisible1 = false;

            },
            del1(index) {
                let deeid = this.tableData[index].id;
                this.$delete(this.tableData, index);

                this.deleteRequest('/emp/deed/delete', {'deeid': deeid}).then((response) => {


                }).catch((error) => {
                    this.$message.error("上传失败");
                    //alert("无法展示");

                });

            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        done();
                    })
                    .catch((_) => {
                    });
            },
        },

    };
</script>

<style scoped>
</style>